<template>
  <div style="background-color: #fff;">
    <div style="padding:0 20px 20px 20px">
        <div style="padding: 0 0 10px 0;">
          <el-button type="info" plain class="myBtn" @click="close">返回</el-button>
        </div>
        <el-descriptions :column="2" size="small" border>
          <el-descriptions-item label="联系人" label-class-name="yutitem">{{details.contactName}}</el-descriptions-item>
          <el-descriptions-item label="角色名称" label-class-name="yutitem">{{details.roleName}}</el-descriptions-item>
          <el-descriptions-item label="联系电话" label-class-name="yutitem">{{details.phone}}</el-descriptions-item>
          <el-descriptions-item label="公司名称" label-class-name="yutitem">{{details.company}}</el-descriptions-item>
          <el-descriptions-item label="反馈日期" label-class-name="yutitem" :span="2">{{details.createTime}}</el-descriptions-item>
          <!-- <el-descriptions-item label="通知方位" label-class-name="yutitem">
            <template v-if="details.notifyArea">
              <span v-for="(dt,index) in JSON.parse(details.notifyArea)" :key="index">{{dt.province}}{{dt.city}}{{dt.area}}、</span>
            </template>
          </el-descriptions-item> -->
          <el-descriptions-item label="反馈描述" :span="2" label-class-name="yutitem">
              <div class="fbcon" v-html="details.content" style="white-space:pre-line;"></div>
              <div class="fj">
                
                <template v-for="dt in JSON.parse(details.attachsPath || '[]')" :key="dt.url">
                    <template v-if="dt.url.endsWith('.jpg') || dt.url.endsWith('.png') || dt.url.endsWith('.jpeg') || dt.url.endsWith('.gif')">
                      <a target="_blank" :href="dt.url"><img :src="dt.url" alt=""/></a>
                    </template>
                    <template v-else>
                      <!----附件-->
                      <p><a target="_blank" :href="dt.url">{{dt.name}}</a></p>
                    </template>
                </template>
              </div>
          </el-descriptions-item>
      </el-descriptions>
      
    </div>
  </div>
</template>

<script setup>
// 这里的name是为了做页面缓存，其值要跟路由里面的name值一样

import { nextTick, ref, reactive,watch, onActivated,onMounted} from 'vue'
import{useRouter,useRoute} from "vue-router"

import {getFeedbacksDetail} from '@/api/system'

import { useUserStore } from '@/pinia/modules/user'
import { emitter } from '@/utils/bus.js'
import mainLayout from '@/components/custom/mainLayout.vue'
import { message } from '@/utils/element'


const router = useRouter()
const route = useRouter()
const userStore = useUserStore()

const notifyId = ref('')
const details = ref({})

onMounted(async ()=>{
  notifyId.value = route.currentRoute.value.query.id
  if(notifyId.value){
    const res = await getFeedbacksDetail(notifyId.value)
    if(res.code == 0 || res.success){
      details.value = res.data
    }else{
      message('获取数据出错了',3)
    }
  }
})


const close = ()=>{
  emitter.emit('closeThisPage')
}

</script>

<style lang="scss">
.el-descriptions__label{
&.yutitem{
  width: 100px;
  word-wrap: break-word;
  word-break: break-all;
}
}
.fbcon,.fj{
  line-height: 26px;
}
.fj{
  img{
    max-width: 300px;
  }
}
</style>